<template>
  <div class="qt-wrap">
    <p class="qt-title">
      <span>{{ question.idx }}.</span>{{ question.title || '未填写' }}
    </p>
    <ul>
      <li class="choice-item" v-for="(choice, i) in question.choices" :key="i">
        <span>{{ AtoZ[i] }}、</span>{{ choice || '未填写' }}
      </li>
    </ul>
    <p class="qt-tools">
      <el-button v-show="isLast" type="danger" size="small" @click="handleDelete">删除</el-button>
      <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
    </p>
  </div>
</template>

<script lang="ts" setup>
  import { toRefs, PropType } from 'vue';
  import { Question } from '../../utils/scale.type';
  import { AtoZ } from '@/utils/common-data';
  import Message from '@/utils/message';
  import { Http } from '@/utils/http';

  // 通信
  const props = defineProps({
    question: {
      type: Object as PropType<Question>,
      default: () => ({
        id: 0,
        title: '',
        idx: 0,
        choice: ['是', '否'],
      }),
    },
    isLast: {
      type: Boolean,
      default: false,
    },
  });
  const { question, isLast } = toRefs(props);
  const emit = defineEmits({
    handleEdit: null,
    reLoad: null,
  });

  // 事件 - 编辑
  const handleEdit = () => {
    emit('handleEdit', question.value);
  };

  // 事件-删除
  const handleDelete = () => {
    Message.confirm('确定删除该题目？一旦删除将不可恢复！', () =>
      Http.post('/question/delete', { id: question.value.id }).then(() => {
        Message.success('删除成功！');
        emit('reLoad');
      }),
    );
  };
</script>

<style lang="scss" scoped>
  .qt-wrap {
    box-shadow: 2px 2px 5px #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;

    .qt-title {
      min-height: 40px;
      line-height: 20px;

      span {
        margin-right: 5px;
        font-weight: bold;
      }
    }
    ul {
      margin: 10px 0;
      li {
        color: #777;
      }
    }
    .qt-tools {
      text-align: right;
    }
  }
  .choice-item-p {
    padding-bottom: 10px;
  }
</style>
